<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div>ul>li{
				list-style-type: none;
				text-decoration: none;
				float: left;
				width: 20px;
				height: 20px;
				border: 1px solid black;
				margin: 0pc 10px;
			}
			div>ul>li>a{
				display: inline-block;
				width: 100%;
				height: 100%;
			}
			.clear{
				clear: both;
			}
			.back-page,.forward-page{
				float: left;
			}
			.selected{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="back-page"><button>前一页</button></div>
			<ul>
				<li><a>1</a></li>
				<li><a>2</a></li>
				<li><a>3</a></li>
				<li><a>4</a></li>
				<li><a>5</a></li>
			</ul>
			<div class="forward-page"><button>后一页</button></div>
			<div class="clear">
			</div>
		</div>
	</body>
	<script src="js/rgb2hex.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			window.onload = function() {
				var buttons = document.getElementsByTagName('button');
				var lis = document.getElementsByTagName('li');
				lis[0].style.background = 'pink';
				buttons[0].onclick = function() {
					var index = -1;
					for(var i = 0 ; i<lis.length ; i++){
						if(rgb2hex(lis[i]).toUpperCase() == '#FFC0CB'){
							index = i;
							break;
						}
					}
					if(index==-1){
						console.info('查无此颜色');
					} else {
						index = index - 1;
						if(index >= 0 ){
							lis[index].style.background = 'pink';
							lis[index+1].style.background='white';
						} else {
							console.info('已达首页');
						}
					}
				}
				
				buttons[1].onclick = function() {
					var index = -1;
					for(var i = 0 ; i<lis.length ; i++){
						if(rgb2hex(lis[i]).toUpperCase() == '#FFC0CB'){
							index = i;
							break;
						}
					}
					if(index==-1){
						console.info('查无此颜色');
					} else {
						index = index + 1;
						if(index <=4  ){
							lis[index].style.background = 'pink';
							lis[index-1].style.background = 'white';
						} else {
							console.info('已达最后');
						}
					}
				}
			}
	</script>
</html>
